<!--这个模块是以前的卡券详情，有轮播图，时间久了可以删除，2019.8.13-->
<template>
    <div class="card-detail">
        <div class="card-detail-content" v-if="detailMsg && detailMsg.length > 0" >
            <swiper :options="swiperOption" ref="mySwiper">
                <swiper-slide v-for="(detailMsgItem,key) in detailMsg" :key="key">
                    <card-item :cardItemMsgProps="detailMsgItem.cardMsg"></card-item>
                    <img class="width-full" src="../../assets/images/cardList/discount_card_line.png" alt="">
                    <span class="card-wrap-cricle">
                        <span class="card-content-cricle"></span>
                    </span>
                    <ol class="card-description">
                        <li v-if="detailMsgItem.pageMsg.remark" v-html="detailMsgItem.pageMsg.remark"></li>
                    </ol>
                    <vue-barcode class="displayFlex flexCenter" v-if="detailMsgItem.pageMsg.ticketNum" :value="detailMsgItem.pageMsg.ticketNum" displayValue="false">
                        你的手机无法显示此条形码
                    </vue-barcode>
                    <div class="displayFlex card-phone-address">
                        <div class="card-address-wrap">
                            <p class="card-store-address">{{detailMsgItem.pageMsg.stroeLocation}}</p>
                            <span class="card-store-discount" v-if="userLocation.longitude || userLocation.latitude ">距您{{descount(detailMsgItem.pageMsg.latitude,detailMsgItem.pageMsg.longitude)}}</span>
                        </div>
                        <a v-if="detailMsgItem.pageMsg.phone && Array.isArray(detailMsgItem.pageMsg.phone)&& detailMsgItem.pageMsg.phone.length > 0" :href="'tel:'+detailMsgItem.pageMsg.phone[0]" class="card-phone-wicon displayFlex flexCenter">
                            <span class="iconfont icon-phone"></span>
                        </a>
                        <a v-else-if="detailMsgItem.pageMsg.phone && !Array.isArray(detailMsgItem.pageMsg.phone)" :href="'tel:'+detailMsgItem.pageMsg.phone" class="card-phone-wicon displayFlex flexCenter">
                            <span class="iconfont icon-phone"></span>
                        </a>
                    </div>
                </swiper-slide>
                <!--TODO 这里券下面会出现滚动条，并且这里没有动画,可以用jq的animate-->
                <div ref="cardPagationList" class="swiper-pagination card-detail-pagation-wrap" slot="pagination"></div>
            </swiper>
        </div>
    </div>
</template>

<script>
    import XLocation from '../../x/XLocation'
    import VueBarcode from 'vue-barcode';
    export default {
        name: "CardDetail",
        data(){
           return{
               msg:'',
               userLocation:{},
               cardItemMsgProps:{},
               testSrc:'',
               curPage:1,
               pageSize:10,
               enterCurpage:0,
               cardList:[],
               detailMsg:[],// {pageMsg:{},//  cardMsg:{},}
               nowShowCardIndex:0,
               totalCount:0,
               XLocation:XLocation,
               TicketNum:'',
               isNeedCheckIndex:true,//是否需要判断数组中是否有进入页面时候的劵
               swiperOption:{
                   navigation: {
                       nextEl: '.next-swiper',
                       prevEl: '.prev-swiper',
                   },
                   initialSlide:0,
                   pagination: '.swiper-pagination',
                   loadPrevNext: true,
                   watchSlidesProgress:true,
                   onInit(){
                       setTimeout(()=>{
                           let list = document.getElementsByClassName("swiper-pagination-bullet");
                           for(let value in list){
                               if( document.getElementsByClassName("swiper-pagination-bullet")[value] && value <= list.length ){
                                   document.getElementsByClassName("swiper-pagination-bullet")[value].innerHTML = parseInt(value) + 1;
                               }
                           }
                       },50)

                   },
                   onSlideNextEnd: function(){
                       // this.nowShowCardIndex = ;
                       this.nowIndex();
                       this.bottomIndex();
                   }.bind(this),
                   onSlidePrevEnd: function(){
                       this.nowShowCardIndex --;
                       this.bottomIndex();
                   }.bind(this),
               }
           }
        },
        mounted(){
            this.getLocation();
            /*先定位，然后再获取用户的地理信息*/
            XLocation.userGetHeSelfLocation();
            setTimeout(()=>{
                this.userLocation = XLocation.getUserLocation();
            },600);
            this.TicketNum = this.$route.query.ticketNum;
            this.getCardList();
        },
        methods:{
            getLocation(){
                /*TODO 暂时没有后台的定位，先放着*/
                XLocation.refreshUserLocationByQQLbs();
                this.userLocation = XLocation.getUserLocation();
            },
            descount(latitude,longitude){
                let that = this;
                let returnDiscount = parseInt(XLocation.countDistance(latitude,longitude,that.userLocation.latitude,that.userLocation.longitude)) > 1000 ?
                    parseInt(XLocation.countDistance(latitude,longitude,that.userLocation.latitude,that.userLocation.longitude) * 100 /1000 ) / 100 +"km" :
                    parseInt(XLocation.countDistance(latitude,longitude,that.userLocation.latitude,that.userLocation.longitude))+'m';
                return returnDiscount
            },
            nowIndex(){
                // for(value in document.getElementsByClassName('swiper-pagination-bullet')){
                //
                // }
                // console.log(document.getElementsByClassName('swiper-pagination-current')[0].innerHTML)
                // if( document.getElementsByClassName('swiper-pagination-current').length > 0 ){
                //     this.nowShowCardIndex = document.getElementsByClassName('swiper-pagination-current')[0].innerHTML;
                // }
            },
            initTickDetail(obj){
                let tempArray = [];
                let tempData = {};
                let that = this;
                for(let value in obj){
                    tempData = obj[value];
                    let tempObj = {
                        promotionId:tempData.promotionId,//推广id
                        storeIcon:tempData.storeIcon,//头像
                        templateId:0,
                        state:tempData.state,
                        consume:'',
                        startTime:tempData.startTime,
                        endTime:tempData.endTime,
                        ticketType:tempData.ticketType,
                        scope:tempData.scope,
                        condition:tempData.ticketContent,
                    };
                    let tempDetailObj = {
                        stroeLocation:tempData.belongStoreInfo.location,
                        phone:tempData.belongStoreInfo.phones,
                        remark:tempData.remark,
                        longitude:tempData.belongStoreInfo.longitude,
                        latitude:tempData.belongStoreInfo.latitude,
                        ticketNum:tempData.ticketNum,
                    };
                    if( tempData &&  that.TicketNum == tempData.ticketNum){
                        this.swiperOption.initialSlide = value;
                        that.nowShowCardIndex = value;
                        that.bottomIndex();
                    }
                    tempArray.push({
                        pageMsg:tempDetailObj,
                        cardMsg:tempObj
                    });
                }
                console.log(tempArray);
                this.detailMsg = tempArray;
                /*对下标pogation进行处理*/
                console.log(this.detailMsg);
            },
            bottomIndex(){
                setTimeout(()=>{
                    this.$refs.cardPagationList.scrollLeft = document.getElementsByClassName('swiper-pagination-bullet-active')[0].offsetLeft - 1.25 * parseInt(document.documentElement.clientWidth) / 375 * 100 + 5 ;
                },20)
            },
            getCardList(){
                let that = this;
                let url=`${this.NW_API_API_LOCALE_VERSION}/user/ticket/query/user/${this.userId}/page/${this.curPage}/num/${this.pageSize}`;
                let params = {queryType:1};//这里只有待使用的劵
                // if(TicketNum){
                //     params.selectTicketNum = TicketNum;
                // }
                let tempIndex = 0;
                this.xurl.post(url,params).then((data)=>{
                    if(data.success){
                        /*if( this.isNeedCheckIndex && data.list.length > 0 ){
                            for(let value in data.list){
                                if( data.list[value] && data.list[value].userTicket &&  that.TicketNum == data.list[value].userTicket.ticketNum){
                                    tempIndex = value;
                                    that.isNeedCheckIndex = false;
                                    that.nowShowCardIndex = Number(tempIndex) + Number(data.curPage * that.pageSize);
                                    that.bottomIndex();
                                }
                            }
                        }*/
                        that.cardList.push(...data.list);
                        if( data.totalPages == data.curPage ){
                            that.initTickDetail(that.cardList);
                            that.totalCount = data.totalCount;
                        }else{
                            this.curPage ++;
                            this.getCardList();
                        }
                    }
                })
            },
            changePagination(key){
                setTimeout(()=>{
                    this.nowShowCardIndex=key;
                },100)
            },
        },
        components:{
            'card-item':()=>import('../../components/commonComponents/card/CartItem'),
            'vue-barcode':VueBarcode,
        }
    }
</script>

<style scoped lang="scss">
    @import url($css_root + 'css/swiper.min.css');
    .card-detail{
        padding: 10px;
        background-color: #F2F2F2;
        height: 6.67rem;
        height: 100vh;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    /*swiper-pagination-bullet swiper-pagination-bullet-active*/
    .card-detail /deep/{
        .swiper-pagination-bullet{
            width: 20px;
            height: 20px;
            display: inline-block;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            border: 1px solid #999;
            color: #999;
            text-align: center;
            line-height: 18px;
            border-radius: 50%;
            margin-right: 11px;
            font-size: 10px;
            background-color: #fff;
        }
        .swiper-pagination-bullet-active.swiper-pagination-bullet{
            background-color: #8BA9E8;
            border-color: #8BA9E8;
            color: #fff;
        }
    }
    .card-detail-content{
        background-color: #fff;
        height: 100%;
        overflow: hidden;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
    }
    .card-tie-code{
        width: 100%;
        padding: 0 10px;
        object-fit: contain;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    .card-store-discount{
        color: #56B78C;
        display: inline-block;
        font-size: 12px;
        padding-top: 5px;
    }
    .card-store-address{
        color: #333333;
        font-size: 13px;
        max-width: 100%;
        text-overflow:ellipsis ;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }
    .card-phone{
        width: 44px;
    }
    .card-address-wrap{
        -webkit-flex: 1;
        flex: 1;
        margin-right: .55rem;
    }
    .card-phone-wicon{
        width: 44px;
        height: 44px;
        background-color: #E8EEFB;
        border: 7px solid #F3F6FD;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        margin-right: .27rem;
        .icon-phone{
            color: #8BA9E8;
            font-size: 20px;
        }
    }
    .card-description{
        color: #999;
        font-size: .12rem;
        padding: .14rem .1rem .2rem;
        line-height: .25rem;
        min-height: 1.24rem;
    }
    .card-phone-address{
        padding: 35px 10px 50px;
    }
    .card-detail-pagation-wrap{
        width: 2.5rem;
        position: relative;
        left: 50%;
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        transform: translateX(-50%);
        height: 30px;
        overflow: auto;
        white-space: nowrap;
    }
    .card-detail-pagation{
        width: 2.2rem;
        left: 50%;
        position: relative;
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        transform: translateX(-50%);
        top: 4px;
    }
    .swiper-pagination-content{
        height: .6px;
        width: 2.1rem;
        background: #fff;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        margin:auto;
    }
    /*.card-detail-item{*/
        /*width: 20px;*/
        /*height: 20px;*/
        /*display: inline-block;*/
        /*-webkit-box-sizing: border-box;*/
        /*-moz-box-sizing: border-box;*/
        /*box-sizing: border-box;*/
        /*border: 1px solid #999;*/
        /*color: #999;*/
        /*text-align: center;*/
        /*line-height: 18px;*/
        /*border-radius: 50%;*/
        /*margin-right: 11px;*/
        /*font-size: 10px;*/
    /*}*/
    /*.card-detail-item.active{*/
        /*background-color: #8BA9E8;*/
        /*border-color: #8BA9E8;*/
        /*color: #fff;*/
    /*}*/
    .card-detail-list{
        pointer-events: none;
        white-space: nowrap;
        height: 26px;
        overflow: auto;
        -webkit-transition: all .3s ;
        -moz-transition: all .3s ;
        -ms-transition: all .3s ;
        -o-transition: all .3s ;
        transition: all .3s ;
    }
    /*.swiper-pagination{
        opacity: 0;
        position: relative;
        z-index: -1;
    }*/
</style>